<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script>
    let obj = {
      name: '哈哈'
    }
    function defineReactive(obj, key, value) {
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
          return value
        },
        set(newValue) {
          if(value == newValue) return
          value = newValue
        }
      })
    }
    Object.keys(obj).forEach(key => {
      this.defineReactive(obj, key, obj[key])
    })
    init()
    function init() {
      console.log(obj)
      app.innerHTML = obj.name
    }
    setTimeout(() => {
      obj.name = '狗蛋'
      init()
    }, 2000)
  </script>
</body>
</html>